<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue检测数据改变的原理_数组</title>
   
</head>
  <!--引入开发版本Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
<body>

    <!-- 

     -->
    
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>学校信息</h1>
      <h1>学生信息</h1>
      <button @click="addSex">添加一个性别,默认值是男</button>
      <h2>学生姓名:{{student.name}}</h2>
      <h2 v-if="student.sex">学生性别: {{student.sex}}</h2>
      <hr />

      <h2>学生年龄: 真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
 
      <h2>爱好</h2>
        <ul>
           <li v-for="(f,index) in student.hobby" :key="index"> 
            {{f}}
           </li>
        </ul>
      <h2>朋友们</h2>
        <ul>
           <li v-for="(f,index) in student.friends" :key="index"> 
            {{f.name}}-{{f.age}}
           </li>
        </ul>

    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
    
    //用computed实现
  const vm =  new Vue({
        el:document.getElementById('root'),
        data:{
            name:"尚硅谷",
            address:"北京",
            student:{
               name:'tom',
               age:{
                  rAge:40,
                  sAge:29
               },
               hobby:['抽烟','喝酒','烫头'],
               friends:[
                {name:'jerry',age:35},
                {name:'tony',age:36}
               ]
            }
         },
         methods:{
            addSex(){
              //Vue.set(this.student,'sex','男')
              this.$set(this.student,'sex','男')
            }
         }
    })

   console.log(vm);

</script>

</html>